<template>
	<div style="width: 30vw;margin: 0 auto;">
		<BOX title="虚拟列表">
			<template #content>
				<!-- {{store.state.workerUser}} -->
				<div v-if="store.state.workerUser?.data">
					<ZTABLE :headers="config.header" height="300" :gd="false" :data="store.state.workerUser.data.user">
						<template v-slot="{scoped}">
							<td>{{scoped.id}}</td>
							<td>{{scoped.username}}</td>
							<td>{{scoped.job}}</td>
							<td>{{scoped.money}}k</td>
						</template>
					</ZTABLE>
				</div>
				<div v-else>

					加载中
				</div>

			</template>
		</BOX>

	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		ScrollBoard
	} from "@kjgl77/datav-vue3"
	import BOX from '../../../components/z-box/index.vue';
	import ZTABLE from '../../../components/z-table/index.vue';
	// import isObject from "../../../../utils/isObject"
	const msg = ref()
	import store from "@/store"
	import ws from '../../../../utils/ws';

	const config = reactive({
		header: ['ID', '姓名', '岗位', '薪资'],
		index: true,
		columnWidth: [50],
		data: [],
		align: ['center'],
		carousel: 'page',
	})
	// let wss = new ws()

	// watch(store.state.workerUser.data.user, () => {
	// 	console.log(48)
	// 	// config.data = store.state.workerUser.data.user
	// }, {
	// 	deep: true,
	// 	immediate: true
	// })

	ws.connectWS()
	// onMounted(() => {
	// ws.sendMsg({
	// 	type: 'studentstats'
	// })
	// 	ws.sendMsg({
	// 		type: 'jiekou1'
	// 	})

	// 	ws.sendMsg({
	// 		type:'threeYearPerson'
	// 	})
	// 	ws.sendMsg({
	// 		type:'workerOnline'
	// 	})
	// setInterval(() => {
	ws.sendMsg({
		type: 'workerUser',
		p: 1
	})
	// }, 10000)

	// ws.sendMsg({
	// 	type:'workerCity',
	// 	id:1
	// })

	// })
	console.log(store.state.workerUser.data.user, 83)


	// setInterval(() => {
	// ws.sendMsg({
	// 	type: 'workerUser',
	// 	p: 1
	// })
	// config.data = store.state.workerUser.data.user
	// }, 10000)

	// // 断开重连的状态
	// var duanKaiChongLianFlag = true;
	// // 断开重连的次数
	// var duanKaiCiShu = 10
	// // 断开重连初试定时时间
	// var duanKaiTime = 1000
	// // webscoket 服务 链接存储值
	// var ws = null
	// // 心跳检测 
	// var xinTiaoFlag = true
	// // 心跳检测定时器
	// async function connectWS() {
	// 	// 如果允许断开重连 
	// 	if (duanKaiChongLianFlag) {
	// 		// 如果断开次数大于0 就一直循环
	// 		while (duanKaiCiShu > 0) {
	// 			// 第一次链接 不需要定时  也就是说 一进入页面 就开始执行 
	// 			initWs()
	// 			// 等待 duanKaiTime 秒后 在继续执行
	// 			await WAITS(duanKaiTime)
	// 			// 每次重连的时间 在原基础上 扩大2倍
	// 			duanKaiTime *= 2
	// 			// 重连次数 每次减一
	// 			duanKaiCiShu--
	// 		}
	// 	}
	// }
	// // 第一次链接
	// connectWS()

	// function initWs() {
	// 	ws = new WebSocket("ws://127.0.0.1:3003")

	// 	ws.onopen =async () => {
	// 		// 次数改成0 是为了终止循环 
	// 		duanKaiCiShu = 0
	// 		// 断开重连状态改成 false
	// 		duanKaiChongLianFlag =false
	// 		// 心跳检测定时器 每3秒执行一次
	// 		let xinTiaoIVL = setInterval(()=>{
	// 			// 如果心跳的装填 是true 代表正常 就继续向服务端推送数据
	// 			if(xinTiaoFlag){
	// 				// 推送数据前  先将状态改为false  当服务端给了回复之后 在将此状态 改为true
	// 				xinTiaoFlag = false
	// 				// 向服务端推送数据
	// 				sendMsg({type:"heart"})
	// 			}else{
	// 				// 如果走到else 说明链接超时了  
	// 				// 如果链接超时 需要 清空定时器
	// 				clearInterval(xinTiaoIVL)
	// 				// 清空定时器
	// 				xinTiaoIVL = null
	// 				// 回复重连次数 
	// 				duanKaiCiShu = 10
	// 				// 更改 重连装填 为允许重连
	// 				duanKaiChongLianFlag = true
	// 				// 心跳状态回复为 正常
	// 				xinTiaoFlag = true
	// 				// 调用重连方法 进行重连操作
	// 				connectWS()
	// 			}			
	// 		},3000)
	// 	}

	// 	ws.onmessage = (evt) => {
	// 		// console.log("收到消息")
	// 		// console.log(evt.data, 13)
	// 		let data
	// 		try {
	// 			data = JSON.parse(evt.data)
	// 			if (isObject(data)) {
	// 				console.log(data)
	// 				// 如果type是 心跳检测
	// 				if(data.type==='heart'){
	// 					// 将心跳状态 回复成正常 【xinTiaoFlag =false 代表服务端没有回复消息 就是异常状态】
	// 					xinTiaoFlag=true
	// 				}
	// 				// 存vuex 

	// 			} else {
	// 				console.log(data, "这是个字符串")
	// 			}

	// 		} catch (e) {
	// 			console.log("不是json字符串")
	// 			//TODO handle the exception
	// 		}
	// 	}
	// 	ws.onclose = () => {
	// 		// connectWS()
	// 	}
	// 	ws.onerror = (err) => {
	// 		console.log("error")
	// 	}

	// }


	// /**
	//  * data 必须是一个对象  
	//  */
	// const sendMsg = (data) => {
	// 	var flag
	// 	try {
	// 		// constructor 他检测 null 和 undefined 会报错
	// 		// typeof 检测null  array function 都是 obejct
	// 		// instanceof 判断数组时 也是ture [] instanceof Object ===true
	// 		flag = (data).constructor === Object
	// 	} catch (e) {
	// 		flag = false
	// 	}
	// 	console.log(flag, 32)
	// 	if (flag) {
	// 		ws.send(JSON.stringify(data))
	// 	} else {
	// 		ws.send(JSON.stringify(data))
	// 	}

	// }


	const sends = () => {
		ws.sendMsg({
			type: 'studentstats'
		})

		ws.sendMsg({
			type: 'jiekou1'
		})
		ws.sendMsg({
			type: 'jiekou2'
		})

	}


	// function WAITS(times) {
	// 	return new Promise((resolve, reject) => {
	// 		setTimeout(() => {
	// 			resolve(true)
	// 		}, times)
	// 	});
	// }
</script>

<style>
</style>